<template>
	<!--新闻详细页-->
	<view class="page-content">
		<view class="page-top">
			<news-top :obj="objdata"></news-top>
		</view>
		<view class="page-body">
			<rich-text class="con-text" :nodes='objdata.content' decode='true'></rich-text>
		</view>
	</view>
</template>

<script>
	import newsTop from 'pages/components/news_title.vue'
	import { getBannerInfos } from '@/common/api.js'
	
	export default{
		components: {
			newsTop
		},
		data(){
			return {
				objdata:{
					title: '这是新闻标题这是新闻标题',
					img: '/static/data-img/data-tx.png',
					nickname: '张三',
					role_name: '经理',
					create_time: '2021.2.9',
					remarks:'富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本'
				},
				new_id: ''
			}
		},
		onLoad(option){
			this.objdata.remarks = this.formatRichText(this.objdata.remarks)
			this.new_id = option.id;
			let params = {
				id: this.new_id
			};
			getBannerInfos(params).then(res=> {
				this.objdata = res.data
			})
		},
		methods:{
			formatRichText(html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
					return newContent;
			},
		}
	}
</script>

<style lang="scss">
	.page-content{
		width: 100vw;
		display: flex;
		flex-direction: column;
		.page-top{
			border-top: 1rpx solid #f5f5f5;
			padding: 14rpx 30rpx 0 30rpx;
		}
		.page-body{
			display: flex;
			margin-top: 10rpx;
			padding: 0 30rpx;
			.con-text {
				width: 100%;
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 50rpx;
				image{
					width: 100%!important;
					max-width: 100%!important;
				}
			}
		}
		
		
	}
</style>
